// 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果

import React, { useState, useEffect } from 'react'
import { Input, Button, Checkbox, message } from 'antd'
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'

const LoginPage: React.FC = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [rememberMe, setRememberMe] = useState(false)
  const [loading, setLoading] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [cardAnimation, setCardAnimation] = useState(false)

  useEffect(() => {
    setCardAnimation(true)
  }, [])

  const handleLogin = () => {
    if (!username || !password) {
      message.error('请输入用户名和密码')
      return
    }
    setLoading(true)
    // 模拟登录请求
    setTimeout(() => {
      setLoading(false)
      message.success('登录成功')
    }, 1500)
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-blue-50 to-white">
      <div
        className={`w-full max-w-md bg-white rounded-xl shadow-lg p-8 transition-all duration-500 transform ${cardAnimation ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
      >
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold text-gray-800 mb-2">Web实验室管理系统</h1>
          <div className="w-16 h-1 bg-blue-500 mx-auto rounded-full"></div>
        </div>

        <div className="space-y-6">
          <div className="group">
            <label className="block text-sm font-medium text-gray-700 mb-1">用户名</label>
            <div className="relative transition-all duration-300 group-hover:shadow-sm">
              <Input
                size="large"
                placeholder="请输入用户名"
                prefix={<UserOutlined className="text-gray-400" />}
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300 hover:border-blue-400"
              />
            </div>
          </div>

          <div className="group">
            <label className="block text-sm font-medium text-gray-700 mb-1">密码</label>
            <div className="relative transition-all duration-300 group-hover:shadow-sm">
              <Input.Password
                size="large"
                placeholder="请输入密码"
                prefix={<LockOutlined className="text-gray-400" />}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-300 hover:border-blue-400"
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <Checkbox checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)}>
              记住密码
            </Checkbox>
            <a
              href="#"
              className="text-sm text-blue-600 hover:text-blue-800 transition-colors duration-300"
            >
              忘记密码?
            </a>
          </div>

          <Button
            type="primary"
            size="large"
            loading={loading}
            onClick={handleLogin}
            className="w-full !rounded-button whitespace-nowrap bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
          >
            登录
          </Button>
        </div>

        <div className="mt-8 text-center text-sm text-gray-500">
          ©2023 Web实验室管理系统 版权所有
        </div>
      </div>
    </div>
  )
}

export default LoginPage
